import React, { useContext, useState } from 'react';
import { Radio, Card } from '@arco-design/web-react';
import { IconHistory } from '@arco-design/web-react/icon';
import { GlobalContext } from '@/context';
import cs from 'classnames';
import locale from './locale';
import useLocale from '@/utils/useLocale';
import styles from './style/index.module.less';
import Roles from './components/Roles';
import Users from './components/Users';
import Owner from './components/Owner';
import History from './components/History';
import { GlobalState } from '@/store';
import { useSelector } from 'react-redux';

const RadioGroup = Radio.Group;

function Authentication() {
  const t = useLocale(locale);
  const { lang, rtl } = useContext(GlobalContext);

  const [tabVal, setTabVal] = useState('Roles');
  const [visible, setVisible] = useState(false);

  const roles = useSelector((state: GlobalState) => state.roles);
  const owner = roles.find((item) => item.level === 'OWNER');

  return (
    <div className={styles['auth']}>
      {owner?.level === 'OWNER' ? (
        <div className={cs(styles['auth-owner'], rtl ? 'rtl' : '')}>
          <Owner lang={lang} t={t} owner={owner} />
        </div>
      ) : (
        <>
          <Card
            className={cs(styles['auth-tabs'], rtl ? 'rtl' : '')}
            bodyStyle={{ padding: '15px' }}
          >
            <RadioGroup type="button" value={tabVal} onChange={setTabVal}>
              <Radio value="Roles">{t['auth.tabs.roles']}</Radio>
              <Radio value="Users">{t['auth.tabs.users']}</Radio>
            </RadioGroup>
            <IconHistory
              className={styles['auth-history-icon']}
              onClick={() => setVisible(true)}
            />
          </Card>

          {tabVal === 'Roles' && <Roles t={t} rtl={rtl} />}
          {tabVal === 'Users' && <Users t={t} rtl={rtl} />}

          <History
            t={t}
            rtl={rtl}
            lang={lang}
            visible={visible}
            setVisible={setVisible}
          />
        </>
      )}
    </div>
  );
}

export default Authentication;
